<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <div class="content">
          <span>小明今年{{age}}岁</span>
          <span>小明今年{{age}}岁</span>
          <span>小明今年{{age}}岁</span>
          <span>小明今年{{age}}岁</span>
       </div>
       <button>时光计时器</button>
    </div>
</body>
</html>
<script>
//   let dom = document.querySelector('div'); 原生js 选取节点，
//   $('div') 这是jq选取节点
// jq 是 mvc 模式的 vue 是 mvvm 模式的



// for(var i = 0;i<10;i++){ // for 相当于开启10个异步 setTimeout
//     // setTimeout 是一个异步
//   (function(i){
//     setTimeout(()=>{
//       console.log(i);
//     })
//   })(i)
// }

// // 闭包的概念，// 一个作用域有权访问另一个作用域中的变量的函数叫做闭包。
// // 闭包的简单理解 函数嵌套函数，闭包的特点 闭包会形成一个独立的作用域，闭包的变量不会销毁
// function cb(){
//   let a = 10;
//   function ftn (){
//     console.log(a);
//   }
// }



// 在 fn1 中我们没有办法访问 变量 a 因为 fn 和 fn1 属于两个独立的作用域
// function fn () { // 
//   let a = 10;
// }
// function fn1(){
//   console.log(a);
// }


let age = 5;
let vuedom = `<div class="content">
          <span>小明今年${age}岁</span>
          <span>小明今年${age}岁</span>
          <span>小明今年${age}岁</span>
          <span>小明今年${age}岁</span>
       </div>
       <button>时光计时器</button>`
// 会把字符串逐层解析成 多层嵌套的数组

let partent = document.querySelector('#app');
partent.innerHTML = vuedom;
// Object.defineProperty 结合在一起，构成了vue的一个框架
let dom = document.querySelector('button');
dom.onclick = function () {
  age++;
//   let con = document.querySelector('.content');
//   con.innerHTML = `<span>小明几年${age}岁</span>`
  
  vuedom = `<div class="content">
          <span>小明今年${age}岁</span>
          <span>小明今年${age}岁</span>
          <span>小明今年${age}岁</span>
          <span>小明今年${age}岁</span>
       </div>
       <button>时光计时器</button>`
 
}
</script>